import { btnsModule } from '@/utils/bundle'
import useMainStore from '@/store/modules/useMainStore'
import { useWindowSize } from '@vueuse/core'
import * as PIXI from 'pixi.js'
import param from '../param'
import { diyNFileClick, clickDataExport, clickDiyDownload, clickDataImport, clickDiyReset } from '@/utils/events'
import { setPixiData } from '@/store/modules/usePixiStore'
const { width, height } = useWindowSize()

export default async () => {
  const mainStore = useMainStore()
  const { scale } = mainStore.getAppAttr
  const btnsContainer = new PIXI.Container()
  let useWidth = 0
  let leftWidth = 0
  let useHeight = 0
  // 选择图片
  {
    const container = new PIXI.Container()
    const sprite = await btnsModule('red')
    sprite.anchor.set(0.5)
    container.scale.set(0.6)
    container.position.set((width.value / scale) * 0.8, (height.value / scale) * 0.85)
    container.addChild(sprite)
    const text = new PIXI.Text({
      text: '选择图片',
      alpha: 0.8,
      style: {
        fontFamily: 'XQFont',
        fontSize: 52,
        fill: 0x222222,
        align: 'center',
      },
    })
    text.anchor.set(0.5)
    container.position.set(useWidth, container.height / 2)
    useWidth += container.width * 1.1
    container.addChild(text)
    btnsContainer.addChild(container)
    setPixiData(container.uid, {
      accept: 'image/*',
    })
    diyNFileClick.whiteAdd(container)
    leftWidth = container.width / 2
  }
  // 数据导入
  {
    const container = new PIXI.Container()
    const sprite = await btnsModule('red')
    sprite.anchor.set(0.5)
    container.scale.set(0.6)
    container.position.set((width.value / scale) * 0.8, (height.value / scale) * 0.85)
    container.addChild(sprite)
    const text = new PIXI.Text({
      text: '数据导入',
      alpha: 0.8,
      style: {
        fontFamily: 'XQFont',
        fontSize: 52,
        fill: 0x222222,
        align: 'center',
      },
    })
    text.anchor.set(0.5)
    container.position.set(useWidth, container.height / 2)
    useWidth += container.width * 1.1
    container.addChild(text)
    clickDataImport.whiteAdd(container)
    btnsContainer.addChild(container)
  }
  // 数据导出
  {
    const container = new PIXI.Container()
    const sprite = await btnsModule('red')
    sprite.anchor.set(0.5)
    container.scale.set(0.6)
    container.position.set((width.value / scale) * 0.8, (height.value / scale) * 0.85)
    container.addChild(sprite)
    const text = new PIXI.Text({
      text: '数据导出',
      alpha: 0.8,
      style: {
        fontFamily: 'XQFont',
        fontSize: 52,
        fill: 0x222222,
        align: 'center',
      },
    })
    text.anchor.set(0.5)
    container.position.set(useWidth, container.height / 2)
    useWidth = 0
    useHeight += container.height * 1.3
    container.addChild(text)
    clickDataExport.whiteAdd(container)
    btnsContainer.addChild(container)
  }
  // 下载图片
  {
    const container = new PIXI.Container()
    const sprite = await btnsModule('red')
    sprite.anchor.set(0.5)
    container.scale.set(0.6)
    container.position.set((width.value / scale) * 0.8, (height.value / scale) * 0.85)
    container.addChild(sprite)
    const text = new PIXI.Text({
      text: '下载图片',
      alpha: 0.8,
      style: {
        fontFamily: 'XQFont',
        fontSize: 52,
        fill: 0x222222,
        align: 'center',
      },
    })
    text.anchor.set(0.5)
    container.position.set(useWidth, container.height / 2 + useHeight)
    useWidth += container.width * 1.1
    container.addChild(text)
    clickDiyDownload.whiteAdd(container)
    btnsContainer.addChild(container)
  }
  // 数据重置
  {
    const container = new PIXI.Container()
    const sprite = await btnsModule('red')
    sprite.anchor.set(0.5)
    container.scale.set(0.6)
    container.position.set((width.value / scale) * 0.8, (height.value / scale) * 0.85)
    container.addChild(sprite)
    const text = new PIXI.Text({
      text: '数据重置',
      alpha: 0.8,
      style: {
        fontFamily: 'XQFont',
        fontSize: 52,
        fill: 0x222222,
        align: 'center',
      },
    })
    text.anchor.set(0.5)
    container.position.set(useWidth, container.height / 2 + useHeight)
    useWidth += container.width * 1.1
    container.addChild(text)
    clickDiyReset.whiteAdd(container)
    btnsContainer.addChild(container)
  }
  btnsContainer.position.set(leftWidth, param.value.startHeight + param.value.leftUsageHeight)
  return btnsContainer
}
